<template>
	<view style="height:100vh;background: #fff;">
		<view class="img-a">
			<view class="t-b">
				您好，
				<br />
				欢迎使用，21绘小程序
			</view>
		</view>
		<view class="login-view" style="">
			<view class="t-login">
				<form class="cl">
					<view class="t-a">
						<text class="txt">手机号</text>
						<uni-easyinput type="number" placeholder="请输入您的手机号" maxlength="11" v-model="loginForm.username" @blur="validateInput" trim="all" :inputBorder="false"/>
					</view>
					<view class="t-a">
						<text class="txt">密码</text>
						<uni-easyinput type="password" maxlength="18" placeholder="请输入您的密码" v-model="loginForm.password" @blur="validateInput02" :inputBorder="false"/>
					</view>
					<view class="t-a captcha-container">
						<view class="captcha-input">
							<text class="txt">验证码</text>
							<uni-easyinput type="text"  placeholder="请输入验证码" maxlength="6" v-model="loginForm.code" @blur="validateInput01" trim="all" :inputBorder="false"/>
						</view>
						<view class="captcha-image">
							<image :src="codeUrl" @tap="yanzheng()" style="width: 100px; height: 40px;"></image>
						</view>
					</view>
					<button @tap="pwdLogin()">登 录</button>
					<view class="reg" @tap="reg()">注 册</view>
				</form>
		<!-- <view class="t-f"><text>—————— 第三方账号登录 ——————</text></view>
				<view class="t-e cl">
					<view class="t-g" @tap="wxLogin()"><image src="https://zhoukaiwen.com/img/loginImg/wx.png"></image></view>
					<view class="t-g" @tap="zfbLogin()"><image src="https://zhoukaiwen.com/img/loginImg/qq.png"></image></view>
			</view> -->
			</view>
		</view>
	</view>
</template>
<script setup>
import { ref } from 'vue';
import { getCodeImg,login} from '../../api/login';
import { onLoad } from '@dcloudio/uni-app';

const captchaEnabled = ref(true); // 是否开启验证码
const codeUrl = ref(""); //存放验证码的图片
//定义传值属性
const loginForm = ref({
	username: '',
	password: '',
	code: '',
	uuid: ''
})
const reg = () => {
	uni.showToast({ title: '注册跳转', icon: 'none' });
};

const wxLogin = () => {
	uni.showToast({ title: '微信登录', icon: 'none' });
};

const zfbLogin = () => {
	uni.showToast({ title: '支付宝登录', icon: 'none' });
};

// 获取验证码图片
const yanzheng = async () => {
	try {
		let data = await getCodeImg();
		if (data && data.img && data.uuid) {
			codeUrl.value = 'data:image/gif;base64,' + data.img;
			loginForm.value.code = ''; // 清空验证码输入框
			loginForm.value.uuid = data.uuid; // 设置uuid
		} else {
			uni.showToast({
				title: "请重新获取",
				duration: 2000,
				icon: "error"
			});
		}
	} catch (error) {
		console.error('获取验证码图像时出错:', error);
		// 可以在这里添加更多的错误处理逻辑，例如显示错误提示给用户
		uni.showToast({
			title: "获取验证码出错",
			duration: 2000,
			icon: "error"
		});
	}
};

//校验
const errorMessage = ref({
	username: '',
	password: '',
	code: ''
});

//全部校验一次
const isAllPropertiesEmpty = () => {
	validateInput();
	validateInput01();
	validateInput02();
	return (
		errorMessage.value.username === '' &&
		errorMessage.value.password === '' &&
		errorMessage.value.code === ''
	);
};


// 定义验证输入的方法
const validateInput = () => {
	if (!loginForm.value.username.trim()) {
		errorMessage.value.username = '账号不能为空';
		uni.showToast({
			title: "账号不能为空",
			duration: 2000,
			icon: "error"
		});
	} else {
		errorMessage.value.username = '';
	}
};

const validateInput01 = () => {
	if (!loginForm.value.code.trim()) {
		errorMessage.value.code = '验证码不能为空';
		uni.showToast({
			title: "验证码不能为空",
			duration: 2000,
			icon: "error"
		});
	} else {
		errorMessage.value.code = '';
	}
};

const validateInput02 = () => {
	if (!loginForm.value.password.trim()) {
		errorMessage.value.password = '密码不能为空';
		uni.showToast({
			title: "密码不能为空",
			duration: 2000,
			icon: "error"
		});
	} else {
		errorMessage.value.password = '';
	}
};



// 将 pwdLogin 函数声明为 async 函数
const pwdLogin = async() => {

	if (isAllPropertiesEmpty()) {
		uni.showToast({
			title: '登录中',
			duration: 2000,
			icon: "loading"
		});
		let data = await login(loginForm.value);
		if (data.code == 500) {
			uni.showToast({
				title: data.msg,
				duration: 2000,
				icon: "none"
			});
			yanzheng();
		} else {				
			// useInfoStore().setUserInfo(data)
			uni.showToast({
				title: "登录成功",
				duration: 2000,
				icon: "success"
			});
			uni.switchTab({
				url:"/pages/home/home"
			});
			
			// mima();
		 // userxx01();										
		}
	} else {
		uni.showToast({
			title: '校验失败',
			duration: 1000,
			icon: "error"
		});	
	}
};

onLoad(() => {
	yanzheng();
});
</script>

<style>
.txt {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}
.img-a {
	width: 100%;
	height: 450rpx;
	background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
	background-size: 100%;
}
.reg {
	font-size: 28rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
	background: #f5f6fa;
	color: #000000;
	text-align: center;
	margin-top: 30rpx;
}

.login-view {
	width: 100%;
	position: relative;
	margin-top: -120rpx;
	background-color: #ffffff;
	border-radius: 8% 8% 0% 0;
}

.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	padding-top: 80rpx;
}

.t-login button {
	font-size: 28rpx;
	background: #2796f2;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
}

.t-login input {
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	border-bottom: 1px solid #e9e9e9;
	font-size: 28rpx;
}

.t-login .t-a {
	position: relative;
}

.t-b {
	text-align: left;
	font-size: 42rpx;
	color: #ffffff;
	padding: 130rpx 0 0 70rpx;
	font-weight: bold;
	line-height: 70rpx;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 150rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #aeaeae;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}

/* 新增样式 */
.captcha-container {
	display: flex;
	align-items: center;
}

.captcha-input {
	flex: 1;
	margin-right: 10rpx;
}

.captcha-image {
	flex: 1;
	text-align: right;
}
</style>